<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color: yellow;
        }

        #list2 {
            color: red;
        }

        .list2 {
            color: darksalmon;
        }

        li {
            color: chartreuse !important;
        }

        /* 1 + 1 */
        ul li {
            color: darkblue;
        }

        .new-d {
            color: blue;
        }


        /* 1+1+10 */
        ul li .new-d {
            color: red;
        }

        /* 如果选择器层级很深，是否可以抵class */
        div div div div div div div div div div div {}
    </style>
</head>

<body>
    <!-- 选择器权重 ：
        css 优先级：指的就是 css 选择器的权重值，权重值越大，优先级越高，权重值越小，优先级越小。
        最终形成的优先级顺序：!important > 行内 style > #id > .class > Ele


    选择器     权重
    *          0
    标签选择器  1
    类选择器    10
    id选择器    100
    标签内部样式 1000
    !important  无穷大【最不推荐的写法】


    -->
    <ul>
        <li>新闻内容1</li>
        <li class="list2" id="list2" style="color: aqua;">新闻内容2</li>
        <li>新闻内容3
            <div class="new-d">
                即使是特斯拉也无法避免半导体短缺的问题。与此同时，特斯拉通过自身的半导体供求关系，已经比其它汽车品牌好一些了，没有影响新车销售。但根据了解，特斯拉没有事先告知用户，擅自更换零部件，目前这件事已经在全球多个地方发酵。
            </div>
        </li>
        <li>新闻内容4</li>
        <li>新闻内容5</li>
    </ul>
</body>

</html>